<template>
	<view >
		<view class="p-2 bg-white">
			<view class="py-2 text-center mt-2" @click="scanMachineCode">
				<text class="iconfont icon-saomiao text-danger line-h0"></text>
				<view>点击扫描二维码</view>
			</view>
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>机器二维码：
				</view>
				<input class="border p-2 w-100 d-block line-h border-box input-defind rounded font-md" 
				 :class="focusClass.macCode ? 'input-border-color' : ''"
				placeholder-class="text-light-muted" :disabled="type==='update'"
				 @focus="focus('macCode')" @blur="blur($event,'macCode')"
				 placeholder="请输入二维码"
				:value="formData.macCode"/>
			</view>
			<view class="py-2 pl-20 position-relative line-h" v-if="formData.machineName">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
					基本信息：
				</view>
				<view>{{formData.machineName}}
				</view>
			</view>
			
			<!-- 开始时间 -->
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">开始时间：
				</view>
				<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
				 :class="focusClass.startTime ? 'input-border-color' : ''"
				placeholder-class="text-light-muted"  disabled
				 @focus="focus('startTime')" @blur="blur('startTime')"
				 style="width:508upx"
				@click="onShowDatePicker('startTime')" placeholder="请选择开始时间"
				:value="formData.startTime"/>
				<text class="iconfont icon-chacha text-light-muted position-absolute"
				style="right:20upx;top:48upx;" v-if="formData.startTime" @click="clearData('startTime')"
				></text>
				<mx-date-picker :show="showPicker.startTime" type="datetime" :value="formData.startTime" :show-tips="false"  :show-seconds="true" @cancel="cancel($event,'startTime')"  @confirm="onSelected($event,'startTime')" format="yyyy-mm-dd hh:ii:ss"/>
			</view>
			<!-- 结束时间 -->
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">结束时间：
				</view>
				<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
				 :class="focusClass.endTime ? 'input-border-color' : ''"
				placeholder-class="text-light-muted"  disabled
				 @focus="focus('endTime')" @blur="blur('endTime')"
				 style="width:508upx"
				@click="onShowDatePicker('endTime')" placeholder="请选择结束时间"
				:value="formData.endTime"/>
				<mx-date-picker :show="showPicker.endTime" type="datetime" :value="formData.endTime" :show-tips="false"  :show-seconds="true"   @cancel="cancel($event,'endTime')" @confirm="onSelected($event,'endTime')" format="yyyy-mm-dd hh:ii:ss"/>
				<text class="iconfont icon-chacha text-light-muted position-absolute"
				style="right:20upx;top:48upx;" v-if="formData.endTime" @click="clearData('endTime')"
				></text>
			</view>
			<!-- 保养结果 -->
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				<text class="text-danger">*</text>保养结果：
				</view>
				<view class="d-flex">
					<view @click="selectRadio(0)" class="mr-1">
						<text class="iconfont text-danger font-lg" :class="formData.result===0?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>
						<text>保养中</text>
					</view>
					<view class="mr-1" @click="selectRadio(1)">
						<text class="iconfont text-danger font-lg" :class="formData.result===1?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>
						<text>保养完成</text>
					</view>
				</view>
			</view>
			
			<view class="py-2 pl-20 position-relative line-h">
				<view class="position-absolute font-md" style="top:40upx;left:20upx;">保养说明：</view>
				 <textarea class="border p-2  d-block rounded font-md" 
				 placeholder-class="text-light-muted" placeholder="请输入保养说明"
				 :class="focusClass.remark ? 'input-border-color' : ''"
				 @focus="focus('remark')" @blur="blur($event,'remark')" auto-height
				 v-model="formData.remark" style="width:468upx"/>
			</view>
			<view class="py-2 position-relative line-h">
				<view class="pl-2 font-md"> 图片上传：</view>
				<image-upload :imageList="imageList"></image-upload>
			</view>
			<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">
				提交
			</view>
		</view>
		
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import mxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	import imageUpload from "@/components/imageUpload/imageUpload.vue"
	export default {
		components:{
			mxDatePicker,
			imageUpload
		},
		data() {
			return {
				id:'',
				type:'',
				formData:{
					macCode:'',
					startTime:'',
					endTime:'',
					result:0,
					remark:'',
					machineName:'',
					machine:'',
					macId:''
				},
				focusClass:{
					macCode:false,
					startTime:false,
					endTime:false,
					remark:false
				},
				showPicker:{
					startTime:false,
					endTime:false
				},
				imageList:[]
				
			}
		},
		onLoad(e){
			this.type = e.type;
			this.id = e.id?e.id:-1;
			if(this.id!==-1){
				this.getDetail()
			}
		},
		methods: {
			getDetail(){
				let self = this;
				self.$H.get(api.maintainDetail+this.id).then(res=>{
					self.formData.macCode=res.content.machineName.macCode
					self.formData.startTime=res.content.startTime
					self.formData.endTime=res.content.endTime
					self.formData.remark=res.content.remark
					self.formData.macId=res.content.macId
					self.formData.result=res.content.result
					self.formData.machineName=`${res.content.shCustomerInfo.name}-${res.content.machineName.type}-${res.content.machineName.macCode}`
					self.formData.machine=res.content.machine
					res.content.picture1?self.imageList.push(res.content.picture1):''
					res.content.picture2?self.imageList.push(res.content.picture2):''
					res.content.picture3?self.imageList.push(res.content.picture3):''
				})
			},
			focus(key){
				this.focusClass[key] = true
			},
			blur(e,key){
				this.focusClass[key] = false
				switch(key){
					case 'macCode':
					this.formData.macCode=e.detail.value
					this.getMachine();
					break;
				}
			},
			scanMachineCode(){
				uni.scanCode({
				    success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.formData.macCode=e.detail.value
						this.getMachine();
				    }
				});
			},
			getMachine(){
				this.$H.get(api.getMachineByMacCode,{macCode:this.formData.macCode}).then(res=>{
					this.formData.machineName =`${res.content.plasmaStationName}-${res.content.type}-${res.content.macCode}`;
					this.formData.pid = res.content.pid
					this.formData.machine = res.content.id;
				},error=>{
					uni.hideToast()
					uni.showToast({
						title:"请输入正确的二维码",
						icon:'none'
					})
					this.formData.machineName ='';
					this.formData.pid = '';
					this.formData.machine ='';
				})
			},
			onShowDatePicker(type){
				this.showPicker[type] = true;
			},
			onSelected(e,type){
				this.formData[type]= e.value;
				this.showPicker[type]=false;
			},
			cancel(e,type){
				this.showPicker[type]=false;
			},
			selectRadio(value){
				this.formData.result=value;
			},
			clearData(type){
				this.formData[type] = '';
			},
			submit(){
				let self= this;
				if(!self.formData.machineName){
					uni.showToast({
					    title:'二维码不能为空',
					    duration: 2000
					});
					return
				}

				let postData={
					id:self.id?self.id:null,
					pid: self.formData.pid,
					machine: self.formData.machine,
					startTime: self.formData.startTime,
					endTime: self.formData.endTime,
					result: self.formData.result,
					remark: self.formData.remark
				}
				this.imageList.forEach((item,index)=>{
					postData['picture' + (index+1)] = item.path
				})
				this.$H.post(api.addUpdateMaintain+this.type,postData).then(res=>{
					uni.showToast({
					    title: '报修成功',
						icon:'success',
					    duration: 2000
					});
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style scoped>
.icon-saomiao{
	font-size: 120upx;
}
</style>
